<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->


    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="Activity.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/community.js" type="text/javascript"></script>
    <title>社区</title>
</head>
<body>
	<div class="head">
		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed brand" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">EDU Chain</a>
					<img src="images/line_short.png" id="line_short1">
					<a href=""><img src="images/search.png" class="search_logo"></a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav navbar-right">
						<li class="dropdown loginMenu">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Log In<span class="glyphicon glyphicon-menu-down"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">Something else here</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</li>
						<li class="divideBar"></li>
						<img src="images/line_short.png" id="line_short2">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon homeMenu"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#">Action</a></li>
								<li><a href="#">Another action</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">Something else here</a></li>
								<li role="separator" class="divider"></li>
								<li><a href="#">Separated link</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<hr style="width: 100%; background-color: #004a86; height: 1px; margin-top: 64px;" size="15">
		
	</div>



	<div class="row" id="container"> 

		<div class="col-md-6 col-md-3" id="user">
			
			<div id="user-info">
				<div id="person"></div>
				<div id="intro">
					<div id="person_name">{{发起人}}</div>
					<div id="introduction">发起人介绍发起人介绍发起人介绍发起人介绍发起人介绍发起人介绍发起人介绍发起人介绍</div>
					<div class="tele">电话：13345678265</div>
					<div class="mail">邮箱：XXXXXXX@126.com</div>
				</div>
			</div>
			<hr style="width: 88%; background-color: #004a86; height: 1px; margin-top: 40px; margin-left: auto">
			<div class="join_list" ">参与者列表</div>
			<div id="join-lists">
				<li class="join_lists">
					<div class="joins_head"></div>
					<div class="joins_name">{{张三}}</div>
				</li>
				<li class="join_lists">
					<div class="joins_head"></div>
					<div class="joins_name">{{张三}}</div>
				</li>
				<li class="join_lists">
					<div class="joins_head"></div>
					<div class="joins_name">{{张三}}</div>
				</li>
				
			</div>
		</div>


		<div class="col-md-12 col-md-6" id="topics">
			<div class="activity-container">
				<div class="activity-content">
					<div class="main-activity-theme">活动主题活动主题活动主题</div>
					<div class="main-activity-person">
						<div class="main-activity-person-head"></div>
						<div class="main-activity-person-name">用户名</div>
						<div class="main-activity-person-time">2017.08.15</div>
					</div>
					<div class="main-activity-content">活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容活动内容</div>
				</div>
				<div class="poster"></div>

			</div>
			<div class="main-activity-foot">
				<div class="join-btn">参加</div>
				<div class="share">分享</div>
				<div class="share-img"></div>
				<div class="collection">收藏</div>
				<div class="collection-img"></div>

			</div>
			<div class="joins-already">
				参与人1、参与人2、参与人3...等<span>222</span>人已参与
			</div>
			<div class="comment-line">
				<div class="comments-amount">11条评论</div>
				<hr style="width: 70%; background-color: #004a86; height: 1px; margin-top: 8px; margin-left: 8px; float: left">
			</div>
		</div>


		<div class="col-md-6 col-md-3" id="activity">
			
			<div style="font-size: 18px; margin-bottom: 10px; margin-left: 10px;">活动列表</div>
			<div class="activity-list">
				<li class="activity-list-item">
					<div class="activity-head">
						<div class="activity-class">讲座</div>
						<div class="activity-theme">{{讲座主题一二三四}}</div>
						<div class="activity-holder">{{主讲人}}</div>
					</div>
					<div class="activity-info">
						<img src="images/activity-line.png">
						<div class="activity-when">{{2017.08.10}}</div>
						<div class="activity-where">{{讲座地点}}</div>
						<a href=""><div class="activity-more">更多>></div></a>
					</div>
					<hr class="activity-hr">
				</li>
				<li class="activity-list-item">
					<div class="activity-head">
						<div class="activity-class">讲座</div>
						<div class="activity-theme">{{讲座主题一二三四}}</div>
						<div class="activity-holder">{{主讲人}}</div>
					</div>
					<div class="activity-info">
						<img src="images/activity-line.png">
						<div class="activity-when">{{2017.08.10}}</div>
						<div class="activity-where">{{讲座地点}}</div>
						<a href=""><div class="activity-more">更多>></div></a>
					</div>
					<hr class="activity-hr">
				</li>
				<li class="activity-list-item">
					<div class="activity-head">
						<div class="activity-class">讲座</div>
						<div class="activity-theme">{{讲座主题一二三四}}</div>
						<div class="activity-holder">{{主讲人}}</div>
					</div>
					<div class="activity-info">
						<img src="images/activity-line.png">
						<div class="activity-when">{{2017.08.10}}</div>
						<div class="activity-where">{{讲座地点}}</div>
						<a href=""><div class="activity-more">更多>></div></a>
					</div>
					<hr class="activity-hr">
				</li>
				<li class="activity-list-item">
					<div class="activity-head">
						<div class="activity-class">讲座</div>
						<div class="activity-theme">{{讲座主题一二三四}}</div>
						<div class="activity-holder">{{主讲人}}</div>
					</div>
					<div class="activity-info">
						<img src="images/activity-line.png">
						<div class="activity-when">{{2017.08.10}}</div>
						<div class="activity-where">{{讲座地点}}</div>
						<a href=""><div class="activity-more">更多>></div></a>
					</div>
					<hr class="activity-hr">
				</li>
				<a href=""><div class="see-all" style="margin-right: 40px;">查看全部</div></a>
			</div>
			<img src="images/contact.png" style="margin-left: 18px;">
		</div>

	</div>
</body>
</html>
